<template>
  <div class="wrapper">
    <div class="newsType">
      <div class="title flex-a">
        <i class="el-icon-document-copy"></i> &nbsp;基层新闻
      </div>
      <div class="more ">
        <div v-for="(opt,index) in moreOpt" :key="index"
             :class="selectedOpt===opt.id?'selected':'noSelected'"
             @mouseover="selectedOpt=opt.id"
        >
          {{ opt.title }}
        </div>

      </div>

    </div>


    <div class="container">


      <div class="flex-a news cursor" v-for="(news,key) in formattedNews" :key="key" v-show="selectedOpt===0">
        <div class="newsTitle">
          <span style="color: #b1afaf;font-size: 20px">·&nbsp;</span>
          <span class="region">[{{ news.region }}]</span>
          <span>{{ news.title }}</span>
        </div>
        <div class="time" :style="news.date==='new'?'color:red':''">
          {{ news.date }}
        </div>
      </div>
<!--      <div v-show="selectedOpt===1">防火工作</div>-->
<!--      <div v-show="selectedOpt===2">宜教工作</div>-->
<!--      <div v-show="selectedOpt===3">防控办工作</div>-->
<!--      <div v-show="selectedOpt===4">司令部工作</div>-->
<!--      <div v-show="selectedOpt===5">政治工作</div>-->
<!--      <div v-show="selectedOpt===6">后勤工作</div> -->
      <div v-show="selectedOpt===1">灭火救援</div>
      <div v-show="selectedOpt===2">政治工作</div>
      <div v-show="selectedOpt===3">后勤保障</div>
      <div v-show="selectedOpt===4">火灾防控</div>
      <div v-show="selectedOpt===5">纪委工作</div>
    </div>


  </div>
</template>

<script>
export default {
  name: "JiCengXinWen",
  data() {
    return {
      news: [
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1700720434984,
          id: 1,
          region: '金水大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1700520234984,
          id: 1,
          region: '火车站大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1698710434984,
          id: 1,
          region: '二七大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1660720434984,
          id: 1,
          region: '登封大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '管城大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '新密大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1700720434984,
          id: 1,
          region: '中原大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1700520234984,
          id: 1,
          region: '荥阳大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1698710434984,
          id: 1,
          region: '惠济大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1660720434984,
          id: 1,
          region: '新郑大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '高新区大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '中牟大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '经开大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '特勤大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '郑东新区大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '上街大队'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '自贸区指挥部'
        },
        {
          title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表',
          date: 1620720434984,
          id: 1,
          region: '巩义大队'
        },
      ],
      selectedOpt: 0,
      moreOpt: [
        // {title: "基层动态", id: 0,},
        // {title: "防火工作", id: 1,},
        // {title: "宜教工作", id: 2,},
        // {title: "防控办工作", id: 3,},
        // {title: "司令部工作", id: 4,},
        // {title: "政治工作", id: 5,},
        // {title: "后勤工作", id: 6,}
        {title: "基层动态", id: 0,},
        {title: "灭火救援", id: 1,},
        {title: "政治工作", id: 2,},
        {title: "后勤保障", id: 3,},
        {title: "火灾防控", id: 4,},
        {title: "纪委工作", id: 5,},
      ]
    }
  },
  computed: {
    formattedNews() {
      const copyNews = [...this.news]
      const now = new Date()
      for (let oneNews of copyNews) {
        let date = new Date(oneNews.date)
        if ((now - date) / (24 * 60 * 60 * 1000) < 3) {
          oneNews.date = 'new'
        } else {
          oneNews.date = this.formattingTime(date.getMonth() + 1) + '-' + this.formattingTime(date.getDate())
        }

      }
      return copyNews
    }
  },
  methods: {
    // 格式化时间——两位数
    formattingTime(val) {
      if (val < 10) {
        val = '0' + val
      }
      return val
    },
    goNews(id) {
      this.$router.push({
        path: '/home/news',
        query: {
          id: id
        }
      })
    }
  }

}
</script>

<style scoped lang="less">

.newsType {
  display: flex;
  justify-content: space-between;
  /*border: red 1px solid;*/
}

.title {
  font-size: 20px;
  color: #2275a1;
  white-space: nowrap;
  border-bottom: 3px solid #2275a1;
}


.more {
  font-size: 16px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: right;
  border-bottom: 3px solid rgb(123, 134, 141);

  div {
    margin: 0 3px;
    padding: 10px;
    cursor: pointer;
  }
}

.newsTitle {
  white-space: nowrap;
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  margin-left: 10px;
  font-size: 16px;
  font-weight: 500;
  color: rgb(14, 13, 13);
  padding-right: 30px;
}

.time {
  color: #b1afaf;
  white-space: nowrap;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-right: 10px;
}

.region {
  color: #0a7ebb;
  margin-right: 5px;
}

.news {
  width: 450px;
  height: 34px;
  justify-content: space-between;
}

.selected {
  color: black;
  background-color: white;
  border-top: 3px solid #0a7ebb;
  border-left: 2px solid #0a7ebb;
  border-right: 2px solid #0a7ebb;

}

.noSelected {
  background-color: #0a7ebb;
  color: white;

}
</style>